<template>
  <a-modal
    title="部门信息"
    :width="860"
    :visible="visible"
    :confirmLoading="confirmLoading"
	:body-style="{paddingBottom: '100px',height:'520px',overflowY:'auto'}"
	:dialogStyle="{top:'50px'}"
	:maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-divider orientation="left">
        	基本信息
        </a-divider>
		<a-form-item v-show="false"
          label="上级部门"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <a-input v-decorator="['parentId', {rules: [{required: true, message: '请输入上级部门！'}]}]" />
        </a-form-item>
		<a-row :gutter="16">
			<a-col class="gutter-row" :span="12">
				<a-form-item
				  label="部门编号"
				  :labelCol="{span: 6}"
				  :wrapperCol="{span: 18}"
				>
				  <a-input placeholder="部门唯一标识" :disabled="id != ''" v-decorator="['code', {rules: [{required: true,message: '请输入部门编号！'}]}]" />
				</a-form-item>
			</a-col>
			<a-col class="gutter-row" :span="12">
				<a-form-item
				  label="部门名称"
				  :labelCol="{span: 6}"
				  :wrapperCol="{span: 18}"
				>
				  <a-input v-decorator="['name', {rules: [{required: true, message: '请输入部门名称！'}]}]" />
				</a-form-item>
			</a-col>
		</a-row>		
		<a-row :gutter="16">
			<a-col class="gutter-row" :span="12">
				<a-form-item
				  label="机构属性"
				  :labelCol="{span: 6}"
				  :wrapperCol="{span: 18}"
				>
				  <a-select v-decorator="['type', {rules: [{required: true,message: '请输入机构属性！'}]}]">
				    <a-select-option  v-for="(obj, index) in typeData" :key="index" :value="obj.name">{{obj.name}}</a-select-option>
				  </a-select>
				</a-form-item>
			</a-col>
			<a-col class="gutter-row" :span="12">
				<a-form-item
				  label="机构规格"
				  :labelCol="{span: 6}"
				  :wrapperCol="{span: 18}"
				>
				  <a-select v-decorator="['grade', {rules: [{required: true,message: '请输入机构规格！'}]}]">
				    <a-select-option  v-for="(obj, index) in gradeData" :key="index" :value="obj.name">{{obj.name}}</a-select-option>
				  </a-select>
				</a-form-item>
			</a-col>
		</a-row>		
		<a-row :gutter="16">
			<a-col class="gutter-row" :span="12">
				<a-form-item
				  label="领导职数"
				  :labelCol="{span: 6}"
				  :wrapperCol="{span: 18}"
				>
				  <a-input-number :style="{width:'100%'}" v-decorator="['leaderNums', {rules: [{required: true,message: '请输入部门简称！'}]}]" />
				</a-form-item>
			</a-col>
			<a-col class="gutter-row" :span="12">
				<a-form-item
				  label="职位细数"
				  :labelCol="{span: 6}"
				  :wrapperCol="{span: 18}"
				>
				  <a-input-number :style="{width:'100%'}" v-decorator="['positionNums', {rules: [{required: true, message: '请输入职位细数！'}]}]" />
				</a-form-item>
			</a-col>
		</a-row>		
        <a-row :gutter="16">
        	<a-col class="gutter-row" :span="12">
        		<a-form-item
        		  label="内部机构"
        		  :labelCol="{span: 6}"
        		  :wrapperCol="{span: 18}"
        		>
        		  <a-input-number :style="{width:'100%'}" v-decorator="['insideNums', {rules: [{required: true, message: '请输入内部机构！'}]}]" />
        		</a-form-item>
        	</a-col>
        	<a-col class="gutter-row" :span="12">
        		
        	</a-col>
        </a-row>		
        
		
		<a-divider orientation="left">
			职务信息
		</a-divider>
		<div class="table-operator">
		  <a-button type="primary" icon="plus" @click="handleAddPosition">添加</a-button>
		</div>
		<a-table :columns="positioncolumns" :data-source="departmentPositionData" :pagination="false" bordered>
			
			<template slot="position" slot-scope="text, record, index">
				<a-select v-model="record.position" :getPopupContainer="selecetPosition">
				   <a-select-option  v-for="(obj, index) in positionData" :key="index" :value="obj.name">{{obj.name}}</a-select-option>
				</a-select>
			</template>
			<template slot="positionType" slot-scope="text, record, index">
				<a-select v-model="record.positionType" :getPopupContainer="selecetPosition">
				   <a-select-option  v-for="(obj, index) in positionTypeData" :key="index" :value="obj.name">{{obj.name}}</a-select-option>
				</a-select>
			</template>
			<template slot="comments" slot-scope="text, record, index">
				<a-input v-model="record.comments" />
			</template>
			<span slot="action" slot-scope="text, record">
			  <template>
						<a-popconfirm
							title="是否删除该条记录?"
							@confirm="handleDel(record)"
							@cancel="cancel"
							okText="是"
							cancelText="否"
						>
							<a href="#">删除</a>
						</a-popconfirm>
			  </template>
			</span>
		</a-table>
		
      </a-form>
       
    </a-spin>
  </a-modal>
</template>


<script>
const positioncolumns = [
  {
  	title: '职务',
	width:'150px',
  	dataIndex: 'position',
  	scopedSlots: { customRender: 'position' },
  },
  {
  	title: '职级',
	width:'120px',
  	dataIndex: 'positionType',
  	scopedSlots: { customRender: 'positionType' },
  },
  {
  	title: '备注',
  	dataIndex: 'comments',
  	scopedSlots: { customRender: 'comments' },
  },
	{
	  title: '操作',
	  scopedSlots: { customRender: 'action' }
	}
]
	
	
import { getPermissions,  getUrl, postAxiosUrl} from '@/api/manage'
import pick from 'lodash.pick'

export default {
  data () {
    return {
      id : '',
	  positioncolumns,
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
	  typeData:[],
	  gradeData:[],
	  departmentPositionData:[],
	  positionData:[],
	  positionTypeData:[],
	  selecetPosition : triggerNode => {return triggerNode.parentNode || document.body;},
    }
  },
  created () {
    
  },
  methods: {
	getSelectData(record,params={}) {
	    var _this = this
	    getUrl('cutDictionaryDetail/getByCode', {code:'001'}).then(res => {
	        _this.typeData = res.result
	    })
		getUrl('cutDictionaryDetail/getByCode', {code:'002'}).then(res => {
		    _this.gradeData = res.result
		})
		getUrl('cutDictionaryDetail/getByCode', {code:'003'}).then(res => {
		    _this.positionData = res.result
		})
		getUrl('cutDictionaryDetail/getByCode', {code:'004'}).then(res => {
		    _this.positionTypeData = res.result
		})
		getUrl('departmentPosition/list', Object.assign(params, {department : (record ? record.id : '')})).then(data => {
		    _this.departmentPositionData = data.result
		})
	},
	add () {
		this.getSelectData(null);	
		this.id = ''
		this.form.resetFields()
		this.visible = true
		this.$nextTick(() => {
			this.form.setFieldsValue({parentId: '0'})
		})

	},
	edit (record) {
		this.getSelectData(record);	
		const { form: { setFieldsValue } } = this
		this.visible = true
		const me = this
		this.$nextTick(() => {
		  me.id = record.id
		  setFieldsValue(pick(record, ['parentId']))
		  setFieldsValue(pick(record, ['code']))
		  setFieldsValue(pick(record, ['name']))
		  setFieldsValue(pick(record, ['type']))
		  setFieldsValue(pick(record, ['grade']))
		  setFieldsValue(pick(record, ['leaderNums']))
		  setFieldsValue(pick(record, ['positionNums']))
		  setFieldsValue(pick(record, ['insideNums']))
		})
	},
	addSubMenu (record) {
	 this.form.resetFields()
	 this.visible = true
	 this.id = ''
	 const { form: { setFieldsValue } } = this
	  const me = this
	  this.$nextTick(() => {
	  setFieldsValue({
			  parentId: record.id,
			})
	})
	},
	close () {
	  this.$emit('close')
	  this.visible = false
	},
	handleCancel () {
	  this.close()
	},
	handleOk () {
	  const _this = this
	  
	  // 触发表单验证
	  this.form.validateFields((err, values) => {
		  values.departmentPositionData=this.departmentPositionData
		// 验证表单没错误
		if (!err) {
		  console.log('form values', values)

		  _this.confirmLoading = true
		 values.id = this.id
		 postAxiosUrl('department/save', values)
		   .then(data => {
			 if(!data.success){
			    _this.$message.warning(data.error)
			    _this.confirmLoading = false
			  }else {
				  _this.visible = false
				  _this.confirmLoading = false
				  _this.$emit('ok', values)
			  }
		   })
		}
	  })
	},
	cancel(e) {
	},
	handleDel(record) {
		  postAxiosUrl('departmentPosition/delete',{id:record.id}).then(res=>{
			 getUrl('departmentPosition/list', {department : this.id}).then(data => {
				 this.departmentPositionData = data.result
			 })
		  })
	},
	handleAddPosition() {
		const { departmentPositionData } = this;
		const newData = {
			key : this.departmentPositionData.length + 1,
			id:'',
			position: '',
			positionType: '',
			comments:''
		  };
		this.departmentPositionData = [...departmentPositionData, newData];
	},
  }
}
</script>

<style>
</style>
